<script setup>
import { reactive, ref, watch } from 'vue' 
// Vue中父组件传递子组件：单向传递(子组件不能修改父组件传递的数据)
let props = defineProps(['dialogFormVisible']) 
// Vue中子组件给父组件传值：使用自定义事件
let emits = defineEmits(['closeCreateEvent', 'createUserEvent'])

// 声明变量，控制弹窗显示隐藏
let dialogVisible = ref(false)
// 侦听器：监听父组件传递的数据dialogFormVisible发生变化时，赋值给dialogVisible
watch(props, value => dialogVisible.value = props.dialogFormVisible)

// 函数：触发自定义事件，告诉父组件关闭弹窗
function closeDialog() {
    // 清除数据
    resetUser()
    // 关闭对话框
    emits('closeCreateEvent')
}

function createUser() {
    // 打印新增的数据是否正常
    console.log(form, "新增的用户数据")
    // 通知父组件新增数据（传递一个复制的数据）
    let user = { ...form }
    emits('createUserEvent', user)
    // 清除数据
    resetUser()
    // 关闭对话框
    closeDialog()
}

function resetUser() {
    form.username = '' //  账号
    form.nickname = '' // 昵称
    form.avatar = '@/assets/default.jpg'   // 头像
    form.phone = ''    // 手机
    form.balance = 0   // 余额(不能新增)
    form.cumCon = 0     // 累计消费(不能新增)
    form.ticket = 0     // 映票(不能新增)
    form.cumTicket = 0  // 累计映票(不能新增)
    form.invitation = '' // 邀请码
    form.regDevice = '' // 注册设备(默认android|不能新增)
    form.regTime = getCurrentTime() // 注册时间(不能新增，默认当前时间)
    form.lastLogin = '-' // 最后登录时间(不能新增)
    form.lastIp = '-' // 最后登录IP地址(不能新增)
    form.status = 1  // 用户账号状态，默认锁定状态(不能新增)
}

const form = reactive({
    username: '', //  账号
    nickname: '', // 昵称
    avatar: '@/assets/default.jpg',   // 头像
    phone: '',    // 手机
    balance: 0,   // 余额(不能新增)
    cumCon: 0,     // 累计消费(不能新增)
    ticket: 0,     // 映票(不能新增)
    cumTicket: 0,  // 累计映票(不能新增)
    invitation: '', // 邀请码
    regDevice: '', // 注册设备(默认android|不能新增)
    regTime: getCurrentTime(), // 注册时间(不能新增，默认当前时间)
    lastLogin: '-', // 最后登录时间(不能新增)
    lastIp: '-', // 最后登录IP地址(不能新增)
    status: 1,   // 用户账号状态，默认锁定状态(不能新增)
})

// 获取当前时间的函数
function getCurrentTime() {
    let date = new Date()
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
        + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
}

// ----------------- 头像相关代码
import { Plus } from '@element-plus/icons-vue'
const imageUrl = ref('') // 头像，默认为空
// 验证头像是否图片
const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像必须是image/jpeg图片格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像文件不能超过 2MB!')
    return false
  }
  return true
}
const handleAvatarSuccess = (
  response,
  uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

</script>
<template>
    <el-dialog @closed="closeDialog" v-model="dialogVisible" title="管理员-新增用户" width="800">
        <el-form :model="form">
            <el-form-item label="账号：" :label-width="formLabelWidth">
                <el-input v-model="form.username" placeholder="请输入账号" autocomplete="off" />
            </el-form-item>
            <el-form-item label="昵称：" :label-width="formLabelWidth">
                <el-input v-model="form.nickname" placeholder="请输入昵称" autocomplete="off" />
            </el-form-item>
            <el-form-item label="头像：" :label-width="formLabelWidth">
                <el-upload class="avatar-uploader" 
                    :auto-upload="false"
                    action="#"
                    :show-file-list="false" 
                    :on-success="handleAvatarSuccess" 
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="手机：" :label-width="formLabelWidth">
                <el-input v-model="form.phone" placeholder="请输入手机号码" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邀请码：" :label-width="formLabelWidth">
                <el-input v-model="form.invitation" placeholder="请输入邀请码(可以为空)" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="createUser">
                    新增用户
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>
.el-form {
    padding: 20px 40px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>